<template>
  <div class="chart-wrapper">
    <dv-scroll-board :config="option" />
  </div>
</template>

<script>
import { randomNum } from '@/utils'
export default {
  data() {
    return {
      span1: '<span class="span1">*****</span>',
      span2: '<span class="span2">*****</span>',
      span3: '<span class="span3">*****</span>',
      span4: '<div class="span4">*****</div>',
      option: {
        data: [
          // ['<span style="color:#37a2da;">行1列1</span>', '行1列2', '行1列3'],
        ],
        index: true,
        rowNum: 10,
        columnWidth: [50],
        waitTime: 2000,
        align: ['center'],
        oddRowBGC: 'rgba(255, 255, 255, 0.06)',
        evenRowBGC: 'transparent'
      }
    }
  },
  components: {},
  mounted() {
    const makeData = () => {
      const result = []
      for (let i = 0; i < 30; i++) {
        const span1Nums = randomNum({ min: 10, max: 24 }, 3, 0)
        const span1 = this.span1.replace('*****', span1Nums.join(':'))
        const span2 = this.span2.replace('*****', '张三丰')
        const span3 = this.span3.replace(
          '*****',
          '处理【巡查】 消防安全管理（所属部门：消防）'
        )
        const span4 = this.span4.replace(
          '*****',
          '地址：广东省东莞市厚街镇环岗社区湖景大道23号'
        )
        const htmlStr = [span1, span2, span3, span4].join('')
        result.push([`<div class="shishi-row">${htmlStr}</div>`])
      }
      this.option.data = result
    }
    makeData.call(this)
  },
  methods: {}
}
</script>

<style lang="scss">
.shishizuoye {
  .shishi-row {
    line-height: 1.9363rem;
    font-size: 0.8636rem;
  }
  .span1,
  .span2,
  .span3,
  .span4 {
    display: inline-block;
    vertical-align: middle;
    color: #ffffff;
  }
  .span1 {
    width: 6.0454rem;
  }
  .span2 {
    width: 5.1364rem;
  }
  .span3 {
    color: #ffb12a;
  }
  .span4 {
    display: block;
  }
}
</style>
